<template>
    <div class="index">
        <div class="bg_music" @tap="audioPlay">
            <image src="../../static/images/music_icon.png" class="musicImg" :class="isPlay?'music_icon':''"/>
            <image src="../../static/images/music_play.png" class="music_play" :class="isPlay?'pauseImg':'playImg'"/>
        </div>
        <audio id="myAudio" :src="audioUrl" autoplay loop></audio>
        <div class="in_love">
            <div class="love" v-if="loveTime && loveTime.length>0">
                <image class="title" src="../../static/images/love.png"/>
                <p class="time">
                    <span>{{loveTime[0]}} 天 </span>
                    <span>{{loveTime[1]}} 时 </span>
                    <span>{{loveTime[2]}} 分 </span>
                    <span>{{loveTime[3]}} 秒 </span>
                </p>
            </div>
            <div class="marry" v-if="marryTime && marryTime.length>0">
                <p class="time">
                    <span>{{marryTime[0]}} 天 </span>
                    <span>{{marryTime[1]}} 时 </span>
                    <span>{{marryTime[2]}} 分 </span>
                    <span>{{marryTime[3]}} 秒 </span>
                </p>
                <image class="title" src="../../static/images/marry.png"/>
            </div>
        </div>
        <example></example>
        <p class="temp">未完待续。。。</p>
    </div>
</template>

<script>
import tools from 'common/js/tools'
import Example from 'components/example.vue'
export default {
  name: 'Index',
  data () {
    return {
      isPlay: true,
      audioCtx: '',
      audioUrl: '',
      timer: null,
      marryTime: [],
      loveTime: [],
      openId: ''
    }
  },
  onLoad () {
    const that = this
    that.getOpenId()
    that.audioCtx = wx.createAudioContext('myAudio')
    that.isPlay = true
    that.timer = setInterval(() => {
      that.marryTime = tools.getTimer('02/02/2019')
      that.loveTime = tools.getTimer('01/07/2012')
    }, 1000)
    that.getMusicUrl()
  },
  components: {
    Example
  },
  methods: {
    audioPlay () {
      const that = this
      if (that.isPlay) {
        that.audioCtx.pause()
        that.isPlay = !that.isPlay
        tools.showToast('您已暂停音乐播放~')
      } else {
        that.audioCtx.play()
        that.isPlay = !that.isPlay
        tools.showToast('背景音乐已开启~')
      }
    },

    getMusicUrl () {
      const that = this
      const db = wx.cloud.database()
      const music = db.collection('music')
      music.get().then(res => {
        that.audioUrl = res.data[0].musicUrl
        that.audioCtx.play()
      })
    },

    getOpenId () {
      const that = this
      wx.cloud.callFunction({
        name: 'user',
        data: {}
      }).then(res => {
        that.openId = res.result.openid
      })
    }
  },

  onShareAppMessage: function (res) {
    return {
      path: '/pages/index/main'
    }
  }
}
</script>

<style scoped lang="stylus">
@import '../../common/css/font.css'
@-webkit-keyframes musicRotate
  from
    -webkit-transformb rotate(0deg)
  to
    -webkit-transform rotate(360deg)
@-webkit-keyframes musicStop
  from
    -webkit-transform rotate(20deg)
  to
    -webkit-transform rotate(0deg)
@-webkit-keyframes musicStart
  from
    -webkit-transform rotate(0deg)
  to
    -webkit-transform rotate(20deg)
.index
  height 100%
  position relative
  .bg_music
    position fixed
    right 0
    top 20rpx
    width 100rpx
    z-index 99
    display flex
    justify-content flex-start
    align-items flex-start
    .musicImg
      width 60rpx
      height 60rpx
    .music_icon
      animation musicRotate 3s linear infinite
    .music_play
      width 28rpx
      height 60rpx
      margin-left -10rpx
      transform-origin top
      -webkit-transform rotate(20deg)
    .playImg
      animation musicStop 1s linear forwards
    .pauseImg
      animation musicStart 1s linear forwards
  #myAudio
    display none
  .in_love
    width 690rpx
    padding 30rpx
    height 230rpx
    .love
      display flex
      justify-content flex-start
      align-items center
      height 100rpx
      margin-bottom 30rpx
      .time
        font-family "Pacifico"
      .title
        width 70rpx
        height 60rpx
        margin-right 30rpx
    .marry
      display flex
      justify-content flex-end
      align-items center
      height 100rpx
      .time
        font-family "Pacifico"
        margin-right 30rpx
      .title
        width 60rpx
        height 60rpx
  .temp
    color #ccc
    font-size 30rpx
    text-align center
    height 100rpx
    line-height 100rpx
    font-weight 600
</style>
